<html>
<head>
	 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	 
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css">
		.test{
			height:50px;
			background-color: red;
		}
		.glyphicon-asterisk{
			color: red;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<br>1,标题---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<h1>标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
	<span class="h1">标题1</span>
	<span class="h2">标题2</span>	
	<span class="h3">标题3</span>	
	<span class="h4">标题4</span>	
	<span class="h5">标题5</span>	
	<span class="h6">标题6</span>



	<br>2,文本---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<p><mark>哈哈哈</mark><del>哈哈哈</del><ins>哈哈哈</ins><u>哈哈哈</u><small>哈哈哈</small><strong>哈哈哈</strong>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

	<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>	

	<p class="text-left">
		 左对齐
	</p>
	<p class="text-center">
		剧中
	</p>
	<p class="text-right">
		右对齐
	</p>

	<p class="text-lowercase">
		转换成小写HELLO!
	</p>
	<p class="text-uppercase">
		转换成大写hello!
	</p>
	<p class="text-capitalize">
		首字母大写hello!
	</p>	


	<br>3,表格---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<table class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th>标题一</th>
				<th>标题二</th>
				<th>标题三</th>
				<th>标题四</th>
				<th>标题五</th>
			</tr>
		</thead>
		<tbody>
			<tr class="active">
				<td>内容一</td>
				<td>内容二</td>
				<td>内容三</td>
				<td>内容四</td>
				<td>内容五</td>
			</tr>
			<tr class="waring">
				<td>内容一</td>
				<td>内容二</td>
				<td>内容三</td>
				<td>内容四</td>
				<td>内容五</td>
			</tr>
			<tr class="danger">
				<td>内容一</td>
				<td>内容二</td>
				<td>内容三</td>
				<td>内容四</td>
				<td>内容五</td>
			</tr>
		</tbody>
	</table>


	<br>4,表单---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<form class="form-inline">
		<div class="form-group has-success">
				<!-- class="sr-only" -->
			<label class="control-label" for="">这时一个输入框:</label>
			<input type="text" class="form-control input-lg" placeholder="这是一个输入框!">
		</div>

		<div class="form-group has-waring">
			<label class="control-label" for="">这时一个输入框:</label>
			<select class="form-control">
				<option>北京</option>
				<option>北京</option>
				<option>北京</option>
				<option>北京</option>
			</select>
		</div>

		<div class="form-group has-error">
			<label class="control-label" for="">这时一个输入框:</label>
			<textarea class="form-control"></textarea>
		</div>
		
	</form>

	<br>5,按钮 ---------------------------------------------------------------------------------------------------------------------------------------------------------------<br>
	<button class="btn btn-default btn-lg">这是一个按钮</button>
	<button class="btn btn-success btn-sm">这是一个按钮</button>
	<button class="btn btn-primary active">这是一个按钮</button>
	<button class="btn btn-info btn-block">这是一个按钮</button>
	<button class="btn btn-warning  disabled=""disabled">这是一个按钮</button>
	<button class="btn btn-danger">这是一个按钮</button>
	<button class="btn btn-link">这是一个按钮</button>

	<a class="btn btn-danger" href="">这是a标签的按钮效果</a>

	<br>6,图片 ---------------------------------------------------------------------------------------------------------------------------------------------------------------<br>	<br>
	<img class="img-circle" src="http://h5test.image.alimmdn.com/B1.jpg">
	
	<br>7,珊格布局 ---------------------------------------------------------------------------------------------------------------------------------------------------------------<br>	<br>
	<div class="test col-lg-3 col-md-4 col-sm-6	 col-xs-12 col-lg-offset-3 col-md-offset-4"></div>
	<br><br><br>
	<br>8,图标 ---------------------------------------------------------------------------------------------------------------------------------------------------------------<br>	<br>
		<span class="glyphicon glyphicon-asterisk"></span>

		<button class="btn btn-default">
			<span class="glyphicon glyphicon-star"></span>	
			这是一个带有星形的按钮	
		</button>
	<br>9,下拉菜单 ---------------------------------------------------------------------------------------------------------------------------------------------------------------<br>	<br>
	    <div class="dropdown">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				这是按钮
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">慕课网1</a>
				</li>	
				<li>
					<a href="#">慕课网2</a>
				</li>				
			</ul>
		 </div>


	<br>10,控件组---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<div class="input-group">
		<span class="input-group-addon">$</span>
		<input type="text" class="form-control" name="">
	</div>

	<br>11,导航---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">慕课网1</a></li>
		<li><a href="#">慕课网2</a></li>
		<li><a href="#">慕课网3</a></li>			
	</ul>
	<ul class="nav nav-pills">
		<li class="active"><a href="#">慕课网1</a></li>
		<li><a href="#">慕课网2</a></li>
		<li><a href="#">慕课网3</a></li>			
	</ul>
	<ul class="nav nav-pills nav-stacked">
		<li class="active"><a href="#">慕课网1</a></li>
		<li><a href="#">慕课网2</a></li>
		<li><a href="#">慕课网3</a></li>			
	</ul>

	<br>12,分页---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<nav>
		<ul class="pager">
			<li class="previous"><a href="#">向左</a></li>
			<li class="next"><a href="#">向右</a></li>
		</ul>
		<ul class="pagination pagination-sm ">
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
		</ul>
	</nav>

	<br>13,进度条---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<div class="progress">
		<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 60%">
			60%
		</div>
	</div>

	<br>14,列表---------------------------------------------------------------------------------------------------------------------------------------------------------------
	<ul class="list-group">
		<li class="list-group-item active">这是一个列表<span class="badge">14</span></li>
		<li class="list-group-item disable">这是一个列表<span class="badg">14</span></li>
		<li class="list-group-item list-group-item-info">这是一个列表<span class="badge">14</span></li>
	</ul>
		
	<br>15,面板---------------------------------------------------------------------------------------------------------------------------------------------------------------
	 <div class="panel panel-success">
	 	<div class="panel-heading">
	 		弹出层
	 	</div>
	 	<div class="panel-body">
	 		这是面板的具体内容
	 	</div>
	 </div>
	 <div class="panel-footer">
	 	脚注
	 </div>




</body>
</html>





	